<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper inputTop">
          <el-row :gutter="32" class="rowPda">
            <el-col :xs="24" :sm="8" :lg="6" class="flex">
              <el-input v-model="listQuery.name" placeholder="请输入搜索内容" class="btnScr" :xs="24" :sm="12" :lg="16" />
              <el-button type="primary" icon="el-icon-search" class="btnScrright" :xs="24" :sm="12" :lg="8" @click="src">搜索</el-button>
            </el-col>
            <!-- <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.gender" placeholder="请选择性别" class="btnScr">
                <el-option
                  v-for="item in genderOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-input v-model="listQuery.mobile" placeholder="请输入电话" class="btnScr" :xs="24" :sm="12" :lg="16" />
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.source" placeholder="请选择来源" class="btnScr">
                <el-option
                  v-for="item in ownerSource"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :xs="24" :sm="8" :lg="3" class="agg">
              <el-select v-model="listQuery.tag" placeholder="请选择标签" class="btnScr">
                <el-option
                  v-for="item in tags"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-col> -->
            <el-col :xs="24" :sm="18" :lg="18" class="agg" style="text-align:right">
              <el-button class="add" @click="showEditForm(null)">新增</el-button>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <!---->
    <el-dialog title="" width="647px" custom-class="myDigo inputTop" :show-close="false" :visible.sync="show" :close-on-click-modal="false">
      <h2>{{ txt }} <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <div class="digoDiv">
        <el-form ref="editForm" :model="editForm" :rules="editFormRule" label-width="85px" class="formDiv">
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="头像:">
                <Upload v-if="show" v-model="editForm.avatar" class="bd" :urls="editForm.avatar" :maxcount="1" title="" format="png,jpg,jpeg" @getImage="changeDetailImage" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="视频:">
                <!-- <Upload class="bd" v-model="editForm.avatar" :urls="editForm.avatar" :maxcount=1 title="" format="png,jpg,jpeg" @getImage="changeDetailImage" /> -->
                <Upload6 v-if="show" v-model="editForm.video" class="bd fileUp" :urls="editForm.video" :maxcount="1" title="" format="mp4" @getImage="changeDetailVideo" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="姓名:" :required="true">
                <el-input v-model="editForm.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="英文姓名:" :required="true">
                <el-input v-model="editForm.englishName" placeholder="请输入英文姓名" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="性别:">
                <el-select v-model="editForm.gender" placeholder="请选择性别" class="w100">
                  <el-option
                    v-for="item in genderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <!-- <el-form-item label="生日:">
                <el-date-picker
                  v-model="editForm.birthday"
                  type="date"
                  style="width: 200px;"
                  placeholder="请选择生日"
                />
              </el-form-item> -->
              <el-form-item label="电话:">
                <el-input v-model="editForm.mobile" placeholder="请输入电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-form-item label="标签:" :required="true">
              <div v-for="(item,index) in divTag" :key="index" class="divTag">
                <el-col :xs="10" :sm="10" :lg="10" class="">
                  <el-input v-model="item.tags" placeholder="请输入标签" />
                </el-col>
                <i v-if="index == 0" @click="addTag">+</i>
                <i v-if="index >= 1" @click="removeTag(index)">-</i>
              </div>
            </el-form-item>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="24" :lg="24" class="">
              <el-form-item label="个人介绍:" label-width="85px">
                <el-input
                  v-model="editForm.introduce"
                  type="textarea"
                  placeholder="请输入介绍"
                  maxlength="30"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="disabled" @click="submitForm()">确 定</el-button>
        <el-button class="grey-btn" @click="close">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
  </div>
</template>
<script>
import { genderFormat } from '@/utils/common'
import { genderOptions, ownerSource } from '@/utils/consts'
import { list } from '@/api/tag'
import { add, update } from '@/api/manager'
import Upload from '@/components/Upload/SingleImage'
import Upload6 from '@/components/Upload/SingleImage6'
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
export default {
  components: {
    Upload,
    Upload6
  },
  data() {
    return {
      divTag: [{ tags: '' }],
      txt: '添加运营',
      show: false,
      options_: regionData,
      selectedOptions: [],
      listQuery: {
        page: 1,
        limit: 15,
        name: null,
        gender: null,
        mobile: null,
        source: null,
        tag: null,
        type: 2
      },
      editForm: {
        id: undefined,
        name: null,
        // source: null,
        gender: null,
        birthday: null,
        englishName: null,
        avatar: null,
        mobile: null,
        email: null,
        province: null,
        city: null,
        address: null,
        note: null,
        type: 2
      },
      disabled: true,
      genderOptions,
      genderFormat,
      ownerSource,
      tags: [],
      editFormRule: {
        name: [{ required: true, message: '姓名必填', trigger: 'change' }],
        englishName: [{ required: true, message: '电话必填', trigger: 'change' }]
        // tags: [{ required: true, message: '标签必填', trigger: 'change' }],
      }
    }
  },
  watch: {
    editForm: {
      handler(newVal, oldVal) {
        if (newVal.name && newVal.englishName) {
          if (this.divTag.length >= 1 && this.divTag[0].tags != '') {
            this.disabled = false
          } else {
            this.disabled = true
          }
        } else {
          this.disabled = true
        }
      },
      deep: true
    },
    divTag: {
      handler(val) {
        if (this.editForm.name != '' && this.editForm.englishName != '') {
          if (this.divTag.length >= 1 && this.divTag[0].tags != '') {
            this.disabled = false
          } else {
            this.disabled = true
          }
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  created() {
    this.getRemoteTags()
  },
  methods: {
    src() {
      this.$emit('srcTable', this.listQuery)
    },
    addTag() {
      if (this.divTag[0].tags == '') {
        this.$notify.error({ message: '请填写标签' })
        return
      }
      this.divTag.push({ 'tags': '' })
    },
    removeTag(index) {
      this.divTag.splice(index, 1)
    },
    getRemoteTags() {
      list().then(response => {
        if (response.data.length !== 0) {
          this.tags = response.data
        }
      })
    },
    showEditForm(row = null) {
      this.show = true
      this.divTag = [{ tags: '' }]
      this.editForm = {}
      this.editForm.type = 2
      if (row !== null) {
        this.editForm = Object.assign(row)
      }
    },
    close() {
      this.divTag = [{ tags: '' }]
      this.editForm = {}
      this.editForm.type = 2
      this.show = false
    },
    submitForm(formName) {
      var arr = []
      this.divTag.forEach((item) => {
        if (item.tags != '' && item.tags != null && item.tags != undefined) {
          arr.push(item.tags)
        }
      })
      this.editForm.tags = arr.join(',')
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.loading = true
          add(this.editForm).then((response) => {
            console.log(response)
            if (response.code === 200) {
              this.$notify.success({ message: '保存成功' })
              this.show = false
              this.divTag = [{ tags: '' }]
              this.editForm = {}
              this.editForm.type = 2
              this.$emit('getTable')
            }
            this.loading = false
          })
        }
      })
      return

      return
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this[formName].id === undefined) {
            add(this[formName]).then((response) => {
              console.log(response)
              if (response.code === 200) {
                this.$notify.success({ message: '保存成功' })
                this.show = false
                this.reload()
                // todo 跳转到业主列表
                this.$router.push({ path: '/operation' })
              }
              this.loading = false
            })
          } else {
            update(this[formName]).then((response) => {
              console.log(response)
              if (response.code === 200) {
                this.$notify.success({ message: '保存成功', offset: 50 })
                this.show = false
              }
              this.loading = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handlePictureCardPreview() {

    },
    handleDownload() {

    },
    handleRemove() {

    },
    changeDetailVideo(val) {
      console.log('val:' + val)
      this.editForm.video = val.toString()
    },
    changeDetailImage(val) {
      console.log('val:' + val)
      this.editForm.avatar = val.toString()
    }
  }
}
</script>

<style lang="scss" scoped>
.divTag i{display: inline-block;border-radius: 50%;margin-bottom: 20px; margin-left: 35px;color: #5AC6B7;border: 1px solid #5AC6B7;width: 24px;height: 24px;text-align: center;line-height: 20px;font-size: 20px;}
.add{background: #5AC6B7;color: #fff;border: 0;border-radius: 2px;}
.flex{display: flex;justify-content: space-between;align-items: center;padding-right: 8px!important;}
.btnScr{width: 100%;margin-bottom: 15px;}
::v-deep .btnScr input{border-radius:2px;}
.btnScrright{border-radius:2px;margin-top: -15px;}
.agg{padding-left:8px!important;padding-right: 8px!important;}
@media (max-width:1200px) {
.flex{display: flex;justify-content: space-between;align-items: center;padding-left:8px!important; padding-right: 8px!important;}
}
.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}
.mtright{margin-right: 5px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item{width: 70px;height: 56px;}
::v-deep  .el-upload-list--picture-card .el-upload-list__item div.filediv{width: 100%;height: 100%;}
::v-deep  .el-upload--picture-card{width: 70px;height: 56px;line-height: 66px;}
::v-deep .el-upload__text{line-height: initial;color: #cacaca;margin-top: -10px;font-size: 12px;}
.right10{margin-left: 10px;}
.right20{margin-left: 20px;}
::v-deep .itxt label{font-weight: normal;font-size: 12px;}
::v-deep .itxt {margin-bottom: 15px;}
::v-deep .itxtactive label{color: #5AC6B7;}
.borbtoonline{border-bottom: 1px solid #f2f2f2;padding-bottom: -15px;}
.bortopline{margin-top: 15px;}
.borbtoonline .el-form-item{margin-bottom: 10px;}
.formDiv{padding-left: 39px;padding-right: 39px;}
.rowPda{padding-right: 10px;}
</style>

<style>
@media (min-width:1200px) {
        .inputTop input::-webkit-input-placeholder, textarea::-webkit-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-moz-placeholder, textarea:-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input::-moz-placeholder, textarea::-moz-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }

        .inputTop input:-ms-input-placeholder, textarea:-ms-input-placeholder , select::-webkit-input-placeholder{
          font-size: 12px;
        }
}
</style>
